import { View, Text } from '@tarojs/components'
import { Button, Tag } from '@nutui/nutui-react-taro'
import { Edit, Close } from '@nutui/icons-react-taro'
import React from 'react'
import './index.less'

export interface Address {
  /** 地址ID */
  id: string
  /** 姓名 */
  name: string
  /** 电话 */
  phone: string
  /** 地址 */
  address: string
  /** 是否默认 */
  isDefault: boolean
}

export interface AddressCardProps {
  /** 地址信息 */
  address: Address
  /** 编辑事件 */
  onEdit?: (addressId: string) => void
  /** 删除事件 */
  onDelete?: (addressId: string) => void
  /** 设为默认事件 */
  onSetDefault?: (addressId: string) => void
  /** 点击事件（选择地址） */
  onClick?: (address: Address) => void
  /** 是否显示操作按钮 */
  showActions?: boolean
  /** 自定义类名 */
  className?: string
}

/**
 * AddressCard 地址卡片组件
 * 用于展示地址信息
 */
const AddressCard: React.FC<AddressCardProps> = ({
  address,
  onEdit,
  onDelete,
  onSetDefault,
  onClick,
  showActions = true,
  className = '',
}) => {
  const handleEdit = (e: any) => {
    e.stopPropagation()
    if (onEdit) {
      onEdit(address.id)
    }
  }

  const handleDelete = (e: any) => {
    e.stopPropagation()
    if (onDelete) {
      onDelete(address.id)
    }
  }

  const handleSetDefault = (e: any) => {
    e.stopPropagation()
    if (onSetDefault) {
      onSetDefault(address.id)
    }
  }

  const handleClick = () => {
    if (onClick) {
      onClick(address)
    }
  }

  return (
    <View className={`address-card ${onClick ? 'clickable' : ''} ${className}`} onClick={handleClick}>
      <View className='address-header'>
        <View className='user-info'>
          <Text className='name'>{address.name}</Text>
          <Text className='phone'>{address.phone}</Text>
        </View>
        {address.isDefault && <Tag type='primary'>默认</Tag>}
      </View>

      <View className='address-detail'>
        <Text className='address-text'>{address.address}</Text>
      </View>

      {showActions && (
        <View className='address-actions'>
          {!address.isDefault && onSetDefault && (
            <Button className='default-btn' onClick={handleSetDefault} type='default' size='small'>
              设为默认
            </Button>
          )}
          {onEdit && (
            <Button className='action-btn' onClick={handleEdit} type='default' size='small' icon={<Edit size={16} />}>
              编辑
            </Button>
          )}
          {onDelete && (
            <Button
              className='action-btn'
              onClick={handleDelete}
              type='default'
              size='small'
              icon={<Close size={16} />}>
              删除
            </Button>
          )}
        </View>
      )}
    </View>
  )
}

export default AddressCard

